<template>
  <div class="FeedBack-layout">
    <van-nav-bar title="问题反馈" left-arrow @click-left="$router.go(-1)"/>
    <van-form>
      <div class="FeedBack">
        <van-field v-model="feedback.phone" label="联系电话：" placeholder="请输入联系电话" class="inputPhone"
                   label-width="4.5rem" :error-message="errMessage.phoneMessage"
                   :rules="[{ required: true, message: '请填写手机号码'}]"/>
      </div>
      <div class="Picker">
        <van-field readonly clickable name="picker" :value="feedback.type" label="类型：" placeholder="点击选择"
                   @click="showPicker = true" class="InputType" label-width="4.5rem"
                   :error-message="errMessage.typeMessage"/>
        <van-popup v-model="showPicker" position="bottom" class="PopupPicker">
          <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false"
                      default-index="1"/>
        </van-popup>
      </div>
    </van-form>
    <div class="FeedBack">
      <van-field v-model="feedback.message" rows="1" autosize label="具体内容：" type="textarea" placeholder="请输入留言"
                 class="InputTextarea" label-width="4.5rem" maxlength="50" show-word-limit/>
    </div>
    <div class="FeedBack">
      <van-button type="primary" block round @click="submitData" :loading="loading">提交</van-button>
    </div>
  </div>
</template>

<script>
import regx from "@/Regular/regx";

export default {
  name: "ProblemFeedback",
  data() {
    return {
      feedback: {
        phone: "",
        message: "",
        type: ""
      },
      // 错误信息提示
      errMessage: {
        phoneMessage: "",
        typeMessage: ""
      },
      columns: ['软件功能', 'bug问题', '商品问题', "体验问题"],
      showPicker: false,
      loading: false
    }
  },

  mounted() {
    let height = document.documentElement.clientHeight || document.body.clientHeight;
    let htmlDom = document.getElementsByClassName("FeedBack-layout")[0];
    htmlDom.style.height = height + "px";
  },

  methods: {

    // 弹框单击确定实现数据的选中
    onConfirm(value) {
      this.feedback.type = value;
      this.showPicker = false;
    },

    //提交反馈问题
    async submitData() {
      //开启加载状态
      this.loading = true;

      //验证手机号
      if (!regx.mobileReg.test(this.feedback.phone)) {
        this.errMessage.phoneMessage = "请输入正确手机号码";
        this.loading = false;
        return false;
      }
      //检查选择的问题
      if (this.feedback.type === "") {
        this.errMessage.typeMessage = "请选择一个问题类型";
        this.loading = false;
        return false;
      }

      // 增加属性
      this.feedback.userId = this.$store.getters.user.userId;
      let res = await this.$axios.post(this.$api.feedback, this.feedback);
      if (res.status === 200 && res.data.code === 200) {
        this.$toast(res.data.message);
        setTimeout(() => {
          this.loading = false;
          this.$router.push("/safe");
        }, 200);
      } else {
        this.$toast(res.data.message);
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped lang="less">
.FeedBack-layout {
  background-color: #fafafa;

  .van-nav-bar {
    background-color: #fafafa;
  }

  .FeedBack {
    padding: 0 5px;

    .inputPhone {
      border: 1px solid #fff;
      border-radius: 7px;

      &:hover {
        border: 1px solid #c6fb95;
      }
    }


    .InputTextarea {
      border-radius: 7px;
      margin: 1rem 0;
      height: 8rem;
    }

  }

  .Picker {
    padding: 0 5px;
    margin-top: 10px;

    .InputType {
      border-radius: 7px;
    }

    .PopupPicker {
      height: 40%;
      border-radius: 1rem 1rem 0 0;

    }
  }
}
</style>